<template>
    <el-dialog
            title="添加外部数据源"
            :visible.sync="spatialVisible"
            :close-on-click-modal="false"
            width="50%"
            top="2%"
            v-dialogDrag
            v-loading="loading"
            style="margin-top: 1px"
            id="spatialDialog">
        <el-steps :active="active" finish-status="success" style="margin-top: 15px">
            <el-step title="步骤 1" icon="el-icon-edit"></el-step>
            <el-step title="步骤 2" icon="el-icon-edit"></el-step>
        </el-steps>
        <div v-show="step1" style="margin-top: 8%;margin-left: 20%;height:350px">
            <!--<el-row class="step">-->
            <!--<span style="font-size: 20px;">连接名称：</span>-->
            <!--<el-input v-model="connectionName" clearable style="margin-left: 4%;width: 50%"-->
            <!--placeholder="请输入内容"></el-input>-->
            <!--</el-row>-->
            <el-row class="step">
                <span style="font-size: 20px;" class="myspan">数据源类型：</span>
                <el-select v-model="dataType" placeholder="请选择" @change="chooseDataType"
                           style="margin-left: 4%;width: 50%">
                    <el-option
                            v-for="item in dataTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <!--<el-input v-model="dataType" clearable style="margin-left: 4%;width: 50%"-->
                <!--placeholder="请输入内容" @change=chooseDataType></el-input>-->
            </el-row>
            <div v-show="dataType=='mysql' || dataType=='postgresql'">
                <el-row class="step">
                    <span style="font-size:20px;" class="myspan">ip地址：</span>
                    <el-input v-model="ip" clearable style="margin-left: 4%;width: 50%"
                              placeholder="请输入内容"></el-input>
                </el-row>
                <el-row class="step">
                    <span style="font-size:20px;" class="myspan">数据库名称：</span>
                    <el-input v-model="databaseName" clearable style="margin-left: 4%;width: 50%"
                              placeholder="请输入内容"></el-input>
                </el-row>
                <el-row class="step">
                    <span style="font-size:20px;" class="myspan">端口号：</span>
                    <el-input v-model="port" clearable style="margin-left: 4%;width: 50%"
                              placeholder="请输入内容"></el-input>
                </el-row>
                <el-row class="step">
                    <span style="font-size:20px;" class="myspan">用户名：</span>
                    <el-input v-model="userName" clearable style="margin-left: 4%;width: 50%"
                              placeholder="请输入内容"></el-input>
                </el-row>
                <el-row class="step">
                    <span style="font-size:20px;" class="myspan">密码：</span>
                    <el-input v-model="password" clearable style="margin-left: 4%;width: 50%"
                              placeholder="请输入内容"></el-input>
                </el-row>
            </div>
            <div v-show="dataType=='api'">
                <el-row class="step">
                    <span style="font-size:20px;" class="myspan">URL地址：</span>
                    <el-input v-model="apiUrl" clearable style="margin-left: 4%;width: 50%"
                              placeholder="请输入内容"></el-input>
                </el-row>

            </div>
        </div>
        <div v-show="step2" style="margin-top: 3%;margin-left: 20%;height:350px">
            <el-row class="step" v-if="this.dataType=='postgresql'">
                <span style="font-size:20px;" class="myspan">模式：</span>
                <el-select v-model="scheValue" placeholder="请选择表的名称" @change="chooseSche">
                    <el-option
                            v-for="item in scheTable"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-row>
            <div v-if="this.dataType!='api'">
                <el-row class="step">
                    <span style="font-size:20px;" class="myspan">表名称：</span>
                    <el-select v-model="tableName" placeholder="请选择表的名称" @change="chooseTable">
                        <el-option
                                v-for="item in tables"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-row>
                <el-row class="step">
                    <span style="font-size:20px;" class="myspan">时间字段：</span>
                    <el-select v-model="timeValue" placeholder="请选择表的名称">
                        <el-option
                                v-for="item in fields"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-row>
                <el-row class="step">
                    <span style="font-size:20px;" class="myspan">空间字段：</span>
                    <el-select v-model="spatialValue" placeholder="请选择表的名称">
                        <el-option
                                v-for="item in fields"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-row>
            </div>
                <el-row class="step">
                    <span style="font-size: 20px;" class="myspan">数据集名称：</span>
                    <el-input v-model="dataName" clearable style="margin-left: 4%;width: 50%"
                              placeholder="请输入内容"></el-input>
                </el-row>
                <el-row class="step">
                    <span style="font-size:20px;" class="myspan">数据集描述：</span>
                    <el-input v-model="description" clearable style="margin-left: 4%;width: 50%"
                              placeholder="请输入内容"></el-input>
                </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
             <el-button v-if="step1" tyle="margin-top: 12px;" @click="testConnection">连接</el-button>
             <el-button v-if="step2" tyle="margin-top: 12px;" @click="lastStep">上一步</el-button>
             <el-button tyle="margin-top: 12px;" @click="confirm">确定</el-button>
             <el-button tyle="margin-top: 12px;" @click="cancel">取消</el-button>
        </span>

    </el-dialog>

</template>

<script>


    export default {
        name: "pgSource",
        components: {
            // addDataDialog
        },
        // props: ['loaderTableData'],
        data() {
            return {
                step1: true,
                step2: false,
                // connectionName: '',
                dataType: '',
                dataTypeOptions: [{
                    value: 'mysql',
                    label: 'mysql'
                }, {
                    value: 'postgresql',
                    label: 'postgresql'
                }, {
                    value: 'api',
                    label: 'api'
                }],
                ip: '',
                databaseName: '',
                port: '',
                userName: '',
                password: '',
                tables: [],
                fields: [],
                loading: false,
                spatialVisible: false,
                ifConnection: false,
                // tableValue: '',
                timeValue: '',
                spatialValue: '',
                dataName: '',
                description: '',
                sourceConnect: {},
                active: 0,
                tableName: '',
                scheValue: '',
                scheTable: [],

                apiUrl: '',
            }
        },
        props: {},
        computed: {},
        methods: {
            testConnection() {
                let that = this;
                // this.sourceConnect.connectionName = this.connectionName;
                this.sourceConnect.type = this.dataType;
                this.sourceConnect.ip = this.ip;
                this.sourceConnect.databaseName = this.databaseName;
                this.sourceConnect.port = this.port;
                this.sourceConnect.userName = this.userName;
                this.sourceConnect.password = this.password;
                this.sourceConnect.url = this.apiUrl;
                for (let key in this.sourceConnect) {
                    if (key == "schemaName")
                        delete this.sourceConnect[key]
                    if (key == "tableName")
                        delete this.sourceConnect[key]
                    if (key == "fields")
                        delete this.sourceConnect[key]
                }
                this.$axios.post(that.$URL.pgConnectUrl, that.sourceConnect).then(function (res) {
                    if (res.code === 200) {
                        that.ifConnection = true;
                        that.loading = false;
                        // that.spatialVisible = false;
                        if (that.dataType != 'api') {
                            that.$axios.post(that.$URL.sqlQueryUrl, that.sourceConnect).then(function (res) {
                                if (res.code == 200) {
                                    if (that.dataType == 'postgresql') {
                                        that.scheTable = res.body;
                                    }
                                    if (that.dataType == 'mysql') {
                                        that.tables = res.body;
                                    }
                                    // that.tables = res.body;
                                    // that.active = 1;
                                    // that.step1 = false;
                                    // that.step2 = true;
                                } else {
                                    that.$message({
                                        type: 'error',
                                        message: "数据库模式获取失败"
                                    });
                                }
                            });
                        }
                        that.$message({
                            type: 'success',
                            message: res.message
                        });
                        // that.sourceConnect = {};
                    } else {
                        that.ifConnection = false;
                        // that.loading = false;
                        // that.spatialVisible = false;
                        // //   that.connectionName = '';
                        // that.dataType = '';
                        // that.ip = '';
                        // that.databaseName = '';
                        // that.port = '';
                        // that.userName = '';
                        // that.password = '';
                        // that.tables = [];
                        // that.fields = [];
                        // that.spatialValue = '';
                        // that.timeValue = '';
                        // that.sourceConnect = {};
                        that.$message({
                            type: 'error',
                            message: res.message
                        });
                    }
                })
            },
            lastStep() {
                this.active = 0;
                this.step1 = true;
                this.step2 = false;

                this.ifConnection = false;
                this.scheTable = [];
                this.scheValue = '';
                this.tables = [];
                this.tableName = '',
                    this.fields = [];
                this.timeValue = '';
                this.spatialValue = '';
                this.dataName = '';
                this.description = '';
            },
            cancel() {
                if (this.active == 1) {
                    this.active = 0;
                    this.step1 = true;
                    this.step2 = false;
                }
                this.spatialVisible = false;
                // this.connectionName = '';
                this.dataType = '';
                this.ip = '';
                this.databaseName = '';
                this.port = '';
                this.userName = '';
                this.password = '';
                this.tables = [];
                this.fields = [];
                this.spatialValue = '';
                this.timeValue = '';
                this.sourceConnect = {};
                this.tableName = '';
                this.description = '';
                this.dataName = '';
            },
            chooseDataType() {
                if (this.dataType == 'mysql' || this.dataType == 'postgresql')
                    this.$forceUpdate();
            },
            chooseSche(val) {
                this.scheValue = val;
                let that = this;
                this.tableName = '';
                this.spatialValue = '';
                this.timeValue = '';
                this.tables = [];
                this.sourceConnect.schemaName = val;
                for (let key in this.sourceConnect) {
                    if (key == "tableName")
                        delete this.sourceConnect[key]
                    if (key == "fields")
                        delete this.sourceConnect[key]
                }
                //把schename传到后端获取所有表
                this.$axios.post(that.$URL.sqlQueryUrl, that.sourceConnect).then(function (res) {
                    if (res.code == 200) {
                        that.tables = res.body;
                    } else {
                        that.$message({
                            type: 'error',
                            message: "数据库表获取失败"
                        });
                    }
                });
            },
            chooseTable(val) {
                this.tableName = val;
                this.spatialValue = '';
                this.timeValue = '';
                this.fields = [];
                this.sourceConnect.tableName = val;
                for (let key in this.sourceConnect) {
                    if (key == "fields")
                        delete this.sourceConnect[key]
                }
                //把tablename传到后台请求表中的所有字段
                let that = this;
                this.$axios.post(that.$URL.sqlQueryUrl, that.sourceConnect).then(function (res) {
                    if (res.code == 200) {
                        let noneField = {
                            value: 'none',
                            label: '无'
                        };
                        that.fields = res.body;
                        that.fields.push(noneField);
                    } else {
                        that.$message({
                            type: 'error',
                            message: "数据库表获取失败"
                        });
                    }
                });
            },

            //连接外部数据源
            confirm() {
                if (this.active == 0) {
                    if (this.ifConnection) {
                        this.active = 1;
                        this.step1 = false;
                        this.step2 = true;
                    } else {
                        this.$message({
                            type: 'error',
                            message: "测试连接尚未成功"
                        });
                    }
                } else {
                    //第二步
                    let that = this;
                    this.sourceConnect.dataName = this.dataName;
                    this.sourceConnect.tableName = this.tableName;
                    this.sourceConnect.description = this.description;
                    let listFields = [];
                    for (let i = 0; i < this.fields.length; i++) {
                        if (this.fields[i]["value"] != "none")
                            listFields.push(this.fields[i]["value"]);
                    }
                    let strFilelds = listFields.join();
                    this.sourceConnect.fields = strFilelds;
                    this.sourceConnect.spatialField = this.spatialValue;
                    this.sourceConnect.timeField = this.timeValue;
                    this.$axios.post(that.$URL.externalDataAddUrl, that.sourceConnect).then(function (res) {
                        if (res.code === 200) {
                            // that.ifConnection = true;
                            that.loading = false;
                            that.spatialVisible = false;
                            that.$message({
                                type: 'success',
                                message: res.message
                            });
                            that.$emit('getExternal2');
                            // that.$Bus.$emit('externalDataRefresh', true);
                        } else {
                            that.loading = false;
                            that.spatialVisible = false;
                            // that.connectionName = '';
                            that.dataType = '';
                            that.ip = '';
                            that.databaseName = '';
                            that.port = '';
                            that.userName = '';
                            that.password = '';
                            that.dataName = '';
                            that.tableName = '';
                            that.description = '';
                            that.tables = [];
                            that.fields = [];
                            that.spatialValue = '';
                            that.timeValue = '';
                            that.sourceConnect = {};
                            that.$message({
                                type: 'error',
                                message: res.message
                            });
                        }
                    })
                    this.active = 0;
                    this.step1 = true;
                    this.step2 = false;
                }
            }


        }
        ,
        created() {
            let that = this;
            this.$Bus.$on('pgDataSource', params => {
                that.spatialVisible = params;
            });

        }
        ,
        mounted() {

        }
    }
</script>

<style>
    .step {
        margin: 20px
    }


    #spatialDialog .el-dialog__body {
        overflow: hidden;
    }

    .myspan {
        display: inline-block;
        width: 140px;
    }

</style>